fix: ensure attribute animations respond to code changes #1452

eriklimakc · 2024-07-30T15:43:21Z

GitHub Issue: #1451

PR Type

What kind of change does this PR introduce?

Bugfix

Description

When TextBox was disabled PlaceholderText and Header were not properly placed.

PR Checklist

Please check if your PR fulfills the following requirements:

Other information

Internal Issue (If applicable):

src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml

kazo0 · 2024-08-01T16:53:09Z

@Mergifyio backport release/stable/5.1

mergify · 2024-08-01T16:53:34Z

backport release/stable/5.1

✅ Backports have been created

#1455 fix: ensure attribute animations respond to code changes (backport #1452) has been created for branch release/stable/5.1

eriklimakc · 2024-08-02T16:08:20Z

To have animations taking action also when Text, PlaceholderText, Header are changed via code, we need to use those VisualStateGroups.

I tried to cleanup and avoid repetition as much as I could. From my tests everything is working everywhere, except the animation of Header upwards when text is entered. On the video below the Filled TextBox is using only Setters while the Outlined is using DoubleAnimation to animate the Header upwards:

wasm.animation.mp4

I left comments on the code:

Uno.Themes/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml

Lines 486 to 509 in 7c96d93

    
           										<!-- Setters instead of animations on WASM work --> 
        
           										<Setter Target="HeaderElement_CompositeTransform.ScaleX" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" /> 
        
           										<Setter Target="HeaderElement_CompositeTransform.ScaleY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" /> 
        
           										<Setter Target="HeaderElement_CompositeTransform.TranslateY" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" /> 
        
           									</VisualState.Setters> 
        
           									<!-- Animations now working properly on WASM --> 
        
           									<!--<Storyboard> 
        
           										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform" 
        
           														 Storyboard.TargetProperty="TranslateY" 
        
           														 Duration="{StaticResource MaterialTextBoxAnimationDuration}" 
        
           														 EasingFunction="{StaticResource MaterialEaseInOutFunction}" 
        
           														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" /> 
        
           										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform" 
        
           														 Storyboard.TargetProperty="ScaleX" 
        
           														 Duration="{StaticResource MaterialTextBoxAnimationDuration}" 
        
           														 EasingFunction="{StaticResource MaterialEaseInOutFunction}" 
        
           														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" /> 
        
           										<DoubleAnimation Storyboard.TargetName="HeaderElement_CompositeTransform" 
        
           														 Storyboard.TargetProperty="ScaleY" 
        
           														 Duration="{StaticResource MaterialTextBoxAnimationDuration}" 
        
           														 EasingFunction="{StaticResource MaterialEaseInOutFunction}" 
        
           														 To="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HeaderCompositeTransformScales}, TargetNullValue=1, FallbackValue=1}" /> 
        
           									</Storyboard>-->

cc @kazo0 @Xiaoy312

Xiaoy312

while there is the concern of having multiple parallel visual states (from different VSG) competing to modify the same dependency property
but going through the msdn docs on VS,VSG,VSM,Storyboard,Timeline,DoubleAnimation,Storyboarded animations, etc...
microsoft doesnt seem to explicitly forbid this practice
so ill greenlight this, since it seems to work well atm

Xiaoy312 · 2024-08-08T15:54:37Z

@eriklimakc would you be able to create a standalone repro of the wasm textbox problem, or save a snapshot branch in themes
and open an issue on uno, so we could investigate further?

eriklimakc · 2024-08-08T16:18:44Z

@eriklimakc would you be able to create a standalone repro of the wasm textbox problem, or save a snapshot branch in themes and open an issue on uno, so we could investigate further?

@Xiaoy312 Yes, here is the issue unoplatform/uno#17888

cc @kazo0

src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml

(cherry picked from commit 4fa6108)

….1/pr-1452 fix: ensure attribute animations respond to code changes (backport #1452)

eriklimakc requested a review from kazo0 July 30, 2024 15:43

eriklimakc self-assigned this Jul 30, 2024

eriklimakc linked an issue Jul 30, 2024 that may be closed by this pull request

[Material] TextBox Header and Text overlapped with IsEnabled set to false #1451

Closed

5 tasks

eriklimakc force-pushed the dev/ERLI/1451-textbox-disabled branch from 7908787 to 761045d Compare July 30, 2024 16:23

fix: Place header placeholder to proper place when disabled

761045d

kazo0 reviewed Jul 30, 2024

View reviewed changes

src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml Outdated Show resolved Hide resolved

fix: Add HeaderStates to animate when changes made via code

771692f

eriklimakc requested a review from kazo0 August 1, 2024 18:11

eriklimakc marked this pull request as draft August 2, 2024 15:47

chore: Using special VisualStateGroups to manage animations

3639ddb

eriklimakc force-pushed the dev/ERLI/1451-textbox-disabled branch from 7c96d93 to 3639ddb Compare August 7, 2024 10:41

chore: Fixing animation for wasm

4394c77

agneszitte requested a review from Xiaoy312 August 7, 2024 17:50

chore: Adjust docs and remove test code

f71d18a

eriklimakc marked this pull request as ready for review August 8, 2024 13:13

Xiaoy312 approved these changes Aug 8, 2024

View reviewed changes

eriklimakc mentioned this pull request Aug 8, 2024

[WASM] DoubleAnimation with Converter Behaves Weirdly but works with Setters unoplatform/uno#17888

Open

5 tasks

eriklimakc changed the title ~~fix: Place header placeholder to proper place when disabled~~ fix: ensure attribute animations respond to code changes Aug 8, 2024

agneszitte reviewed Aug 8, 2024

View reviewed changes

src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml Outdated Show resolved Hide resolved

src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml Outdated Show resolved Hide resolved

agneszitte mentioned this pull request Aug 8, 2024

chore: Add TextBox playground unoplatform/Uno.Gallery#1161

Merged

7 tasks

chore: Fix typos

0d6e80f

kazo0 merged commit 4fa6108 into master Aug 9, 2024
20 checks passed

kazo0 deleted the dev/ERLI/1451-textbox-disabled branch August 9, 2024 19:06

mergify bot pushed a commit that referenced this pull request Aug 9, 2024

fix: ensure attribute animations respond to code changes (#1452)

4bf8701

(cherry picked from commit 4fa6108)

mergify bot mentioned this pull request Aug 9, 2024

fix: ensure attribute animations respond to code changes (backport #1452) #1455

Merged

12 tasks

Xiaoy312 added a commit that referenced this pull request Aug 12, 2024

Merge pull request #1455 from unoplatform/mergify/bp/release/stable/5…

38d6bf0

….1/pr-1452 fix: ensure attribute animations respond to code changes (backport #1452)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: ensure attribute animations respond to code changes #1452

fix: ensure attribute animations respond to code changes #1452

eriklimakc commented Jul 30, 2024 •

edited

Loading

kazo0 commented Aug 1, 2024

mergify bot commented Aug 1, 2024 •

edited

Loading

eriklimakc commented Aug 2, 2024 •

edited

Loading

Xiaoy312 left a comment •

edited

Loading

Xiaoy312 commented Aug 8, 2024

eriklimakc commented Aug 8, 2024

fix: ensure attribute animations respond to code changes #1452

fix: ensure attribute animations respond to code changes #1452

Conversation

eriklimakc commented Jul 30, 2024 • edited Loading

PR Type

Description

PR Checklist

Other information

Internal Issue (If applicable):

kazo0 commented Aug 1, 2024

mergify bot commented Aug 1, 2024 • edited Loading

✅ Backports have been created

eriklimakc commented Aug 2, 2024 • edited Loading

Xiaoy312 left a comment • edited Loading

Choose a reason for hiding this comment

Xiaoy312 commented Aug 8, 2024

eriklimakc commented Aug 8, 2024

eriklimakc commented Jul 30, 2024 •

edited

Loading

mergify bot commented Aug 1, 2024 •

edited

Loading

eriklimakc commented Aug 2, 2024 •

edited

Loading

Xiaoy312 left a comment •

edited

Loading